<template>
  <view class="gg-box" v-bind:style="ggBoxStyle">
    <slot name="default" />
  </view>
</template>

<script>
export default {
  name: "GgBox",
  options: {
    addGlobalClass: true,
  },
  props: {
    /* 预留参数 用于接收子级 gg-col间距参数 */
    gutter: {
      type: String,
      default: ''

    },
    margin: {
      type: String,
      default: ''

    },
    padding: {
      type: String,
      default: ''
    },
    backgroundColor: {
      type: String,
      default: ''
    },
    col: {
      type: [String, Number],
      default: ''
    }
  },
  provide() {
    return {
      ggGroupCol: this.col
    };
  },
  data() {
    return {
      ggBoxStyle: {},
      ggBoxMainStyle: {}
    };
  },
  created: function () {
    this._dealStyle();
  },
  methods: {
    _dealStyle() {
      this.ggBoxStyle = {
        marginLeft: this.margin ? this.margin + 'px' : '',
        marginRight: this.margin ? this.margin + 'px' : '',
        background: this.backgroundColor,
        padding: this.padding ? this.padding + 'px' : '',
      }
    }
  }
};
</script> 
<style >
.gg-box {
  margin: 0 10px 10px;
  background-color: #fff;
  padding: 5px;
  border-radius: 5px;
  overflow: auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.gg-box:first-child {
  margin-top: 10px;
}
</style>
